<template>
    <div class="pagBox">
        <ul id="list">
        </ul>
        <select name="" id="sel">
            <option v-for="(item) in pageData.pageSizeList" :value="item">{{item}}条/页</option>
        </select>
        跳至
        <input type="text" name="" id="pageNum">
        页
        总共{{ pageData.total }}条数据
    </div>
</template>
<script setup>
import { onMounted, ref, defineProps} from 'vue';
import left from '../assets/images/teacher/public/arrow-left-bold.svg'
const pageData = ref({
    current: 1,
    pageSize: 5,
    pageSizeList: [5, 10, 20, 50],
    total: 1,   //当页一共有多少数据
    pageNumber: 1, //一共多少页
})

const emits = defineEmits(['changePage'])

//切换页面，重新生成按钮
const changePage = function(data){
    let {hasNext, hasPrevious, pageNumber, records, total} = data
    pageData.value.pageNumber = pageNumber 
    pageData.value.total = total
    let pageNum = document.querySelector('#pageNum')
    pageNum.value = pageData.value.current
    deleteLi()
    if(hasPrevious){
        let img = '<img class="pri" src="'+left+'" alt="<">'
        createBut(img, 'pre')
    }
    for(let i = 0; i+ pageData.value.current <= pageNumber && i < 8; i++){
        createBut(i+pageData.value.current, pageData.value.current)
    }
    if(hasNext){
        let img = '<img src="'+left+'" class="right pri" alt=">">'
        createBut(img, 'nex')
    }
    if(pageNumber == 0){
        createBut(1, 1)
    }
    console.log(data);
}

// 删除ul的所有按钮
function deleteLi() {
   var ul = document.querySelector('#list');  // 获取父级DOM
   // 判断是否包含子元素
   if(ul.hasChildNodes()) {
     var len = ul.childNodes.length;  // 子元素的个数
     for(let i = 0; i < len; i++) {       // 遍历
        ul.removeChild(ul.childNodes[0]);  // 从第一个元素开始删除
     }
   }
}

//重新生成按钮
const createBut = function(ind, pageNumber){
    if(pageNumber != 'pre' || pageNumber != 'nex')
        ind = ind
    else
        ind = Number(ind)
    let ul = document.querySelector('#list')
    let li = document.createElement('li')
    let current = pageData.value.current
    li.innerHTML = ind
    li.classList.add('but')
    console.log(ind);
    if(current == ind)
        li.classList.add('choseBut')
    else{
        if(pageNumber == 'pre'){
            li.addEventListener('click', ()=>{
                getPage(current-1)
            })
        }else if(pageNumber == 'nex'){
            li.addEventListener('click', ()=>{
                getPage(current+1)
            })
        }else{
            li.addEventListener('click', ()=>{
                getPage(ind)        //得到第几页
            })
        }
    }
    ul.appendChild(li)
}

//发起请求得到最新页面
const getPage = function(ind){
    pageData.value.current = ind
    emits('changePage', pageData.value)
}

onMounted(()=>{

    //跳转页面
    let getNum = document.querySelector('#pageNum')
    getNum.addEventListener('blur', ()=>{
        let num = getNum.value
        if(num > pageData.value.pageNumber){
            num = pageData.value.pageNumber
            getNum.value = num 
            console.log(num, pageData.value.pageNumber);
        }
        getPage(num)
    })

    //切换pageSize
    let pageSize = document.querySelector('#sel')
    pageSize.addEventListener('change', ()=>{
        pageData.value.pageSize = pageSize.value
        getPage(pageData.value.current)
    })

    emits('changePage', pageData.value)
})

defineExpose({
    pageData,
    changePage,
    getPage
})

</script>
<style scoped>
.pagBox{
    width: 60%;
    display: flex;
    justify-content: flex-end;
    color: #a19d9d;
    display: flex;
    align-items: center;
    margin-right: 5%;
    margin-top: 3%;
}
#list{
    float: left;
    height: 28px;
}
/deep/ .but{
    width: 28px;
	height: 28px;
    float: left;
	background-color: #ffffff;
	border-radius: 6px;
	border: solid 1px #a19d9d;
    color: white;
    list-style: none;
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    margin-right: 13px;
}
/deep/ .but{
    background-color: #fff;
    color: #707070;
}
/deep/ .choseBut{
    list-style: none;
    width: 28px;
	height: 28px;
    float: left;
    color: #ffffff;
	background-color: #8493a6;
	border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 13px;
    cursor: pointer;
}
/deep/ .right{
    list-style: none;
    transform: rotate(180deg);
}
#sel{
    border-radius: 6px;
	border: solid 1px #a19d9d;
    height: 28px;
    width: 68px;
    outline: none;
    margin-right: 13px;
    color: #a19d9d;
}
#pageNum{
    width: 45px;
	height: 28px;
	background-color: #ffffff;
	border-radius: 6px;
	border: solid 1px #a19d9d;
    color: #a19d9d;
    outline: none;
    margin-right: 13px;
    margin-left: 13px;
}
/deep/.pri{
    background-color: #ffffff;
    width: 60%;
}
</style>